import dash
from dash import html
import feffery_antd_components as fac
from dash.dependencies import Input, Output, State

app = dash.Dash()

app.layout = html.Div(
    fac.AntdLayout(
        [
            fac.AntdHeader(),

            fac.AntdLayout(
                [
                    fac.AntdSider(
                        [
                            fac.AntdMenu(
                                menuItems=[
                                    {
                                        'component': 'Item',
                                        'props': {
                                            'key': f'选项{i}',
                                            'title': f'选项{i}'
                                        }
                                    }
                                    for i in range(10)
                                ],
                                id='menu-test',
                                mode='inline',
                                style={
                                    'height': '100%',
                                    'overflowX': 'hidden',
                                    'overflowY': 'auto'
                                }
                            )
                        ],
                        width=325
                    ),

                    fac.AntdContent(
                        [
                            html.Div(
                                fac.AntdTabs(
                                    [
                                        fac.AntdTabPane(
                                            [
                                                fac.AntdResult(
                                                    title='功能开发中...',
                                                    status='404'
                                                )
                                            ],
                                            tab='个人中心',
                                            key='个人中心',
                                            closable=False
                                        )
                                    ],
                                    id='tabs-test',
                                    type='editable-card',
                                    defaultActiveKey='个人中心',
                                    style={
                                        'width': '100%'
                                    }
                                ),
                                style={
                                    'width': '100%',
                                    'height': '100%',
                                    'backgroundColor': 'white'
                                }
                            )

                        ],
                        style={
                            'overflowY': 'auto'
                        }
                    )
                ]
            )
        ],
        style={
            'height': '100%',
            'width': '100%'
        }
    ),
    style={
        'height': '100vh'
    }
)


@app.callback(
    [Output('tabs-test', 'children'),
     Output('tabs-test', 'activeKey')],
    [Input('menu-test', 'currentKey'),
     Input('tabs-test', 'latestDeletePane')],
    [State('tabs-test', 'children'),
     State('tabs-test', 'activeKey')]
)
def test(currentKey, latestDeletePane, children, activeKey):
    ctx = dash.callback_context

    if ctx.triggered[0]['prop_id'] == 'menu-test.currentKey':

        if currentKey:
            exists_keys = [child['props']['key'] for child in children]

            if currentKey in exists_keys:
                return dash.no_update, currentKey

            return children + [
                fac.AntdTabPane(
                    currentKey,
                    tab=currentKey,
                    key=currentKey,
                    style={
                        'height': '100%'
                    }
                )
            ], currentKey

    elif ctx.triggered[0]['prop_id'] == 'tabs-test.latestDeletePane':

        if activeKey == latestDeletePane:
            return [child for child in children if child['props']['key'] != latestDeletePane], '个人中心'

        return [child for child in children if child['props']['key'] != latestDeletePane], dash.no_update

    return dash.no_update


# 调试模式
if __name__ == '__main__':
    app.run_server(debug=True)
